<template>
  <div class="question-list">
    <!-- 筛选组件 -->
    <div class="question-filter">
      <el-form
        :inline="true"
        label-position="right"
        label-width="100px"
        size="medium"
      >
        <el-row>
          <!-- 学科方向 -->
          <el-col :span="8">
            <el-form-item label="学科方向:" prop="subject_id">
              <el-select
                v-model="query.subject_id"
                placeholder="请选择学科"
                clearable
              >
                <el-option
                  v-for="item in treeList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <!-- 目录信息 -->
          <el-col :span="8">
            <el-form-item label="目录信息:" prop="directory_id">
              <el-select
                v-model="query.directory_id"
                placeholder="请选择目录"
                clearable
              >
                <el-option
                  v-for="item in directoryList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <!-- 标签信息 -->
          <el-col :span="8">
            <el-form-item label="标签信息:" prop="tag_id">
              <el-select
                v-model="query.tag_id"
                multiple
                placeholder="请选择标签"
                clearable
              >
                <el-option
                  v-for="item in tagList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <!-- 试题难度 -->
          <el-col :span="8">
            <el-form-item label="试题难度:" prop="difficulty">
              <el-radio-group v-model="query.difficulty">
                <el-radio :label="1">简单</el-radio>
                <el-radio :label="2">中等</el-radio>
                <el-radio :label="3">较难</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <!-- 试题类型 -->
          <el-col :span="8">
            <el-form-item label="试题类型:" prop="quest_type">
              <el-select
                v-model="query.quest_type"
                placeholder="选择题型"
                clearable
              >
                <el-option
                  label="单选题"
                  :value="1"
                />
                <el-option
                  label="多选题"
                  :value="2"
                />
                <el-option
                  label="判断题"
                  :value="3"
                />
                <el-option
                  label="简答题"
                  :value="4"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <!-- 面试真题 -->
          <el-col :span="8">
            <el-form-item label="面试真题:" prop="is_true_question">
              <el-radio-group v-model="query.is_true_question">
                <el-radio :label="1">是</el-radio>
                <el-radio :label="2">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <!-- 题干信息 -->
          <el-col :span="24">
            <el-form-item label="题干信息:" prop="question" class="wangEditor">
              <WangEditor
                v-model="query.question"
                :ref-name="'question'"
              />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <!-- 试题答案 -->
            <el-form-item label="试题答案:">
              <!-- 单选题 -->
              <el-table v-if="query.quest_type===1" :data="tableDataOne" border style="width:100%">
                <el-table-column width="100" prop="code" label="单选项">
                  <template slot-scope="scope">
                    <el-radio-group v-model="scope.row.is_true">
                      <el-radio :label="true">{{ scope.row.code }}</el-radio>
                    </el-radio-group>
                  </template>
                </el-table-column>
                <el-table-column label="单选项内容" width="650" prop="content">
                  <template slot-scope="scope">
                    <el-input v-model="scope.row.content" type="textarea" x placeholder="请输入内容" />
                  </template>
                </el-table-column>
                <el-table-column label="操作" width="194">
                  <div v-show="1===1">
                    <el-button type="success" icon="el-icon-plus" circle />
                    <el-button type="danger" icon="el-icon-delete-solid" circle />
                  </div>
                </el-table-column>
              </el-table>
              <!-- 多选题 -->
              <el-table v-else-if="query.quest_type===2" ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%" border>
                <el-table-column width="100" prop="code" label="多选项">
                  <template slot-scope="scope">
                    <el-checkbox v-model="scope.row.is_true">
                      {{ scope.row.code }}
                    </el-checkbox>
                  </template>
                </el-table-column>
                <el-table-column label="多选项内容" width="650" prop="content">
                  <template slot-scope="scope">
                    <el-input v-model="scope.row.content" type="textarea" :rows="2" placeholder="请输入内容" />
                  </template>
                </el-table-column>
                <el-table-column label="操作" width="194">
                  <div v-show="1===1">
                    <el-button type="success" icon="el-icon-plus" circle />
                    <el-button type="danger" icon="el-icon-delete-solid" circle />
                  </div>
                </el-table-column>
              </el-table>
              <!-- 判断题 -->
              <el-card v-else-if="query.quest_type===3" class="box-card" shadow="never">
                <div slot="header" class="clearfix">
                  <span>判断题</span>
                </div>
                <div>
                  <el-radio v-model="checkNum" label="2">错误</el-radio>
                </div>
                <div>
                  <el-radio v-model="checkNum" label="1">正确</el-radio>
                </div>
              </el-card>
              <!-- 简单题 -->
              <div v-else-if="query.quest_type===4" class="wangEditor">
                <WangEditor
                  v-model="query.quest_answer"
                  :ref-name="'quest_answer'"
                />
              </div>
              <span v-else>请选择试题类型，生成答案模板</span>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="答案解析:" class="wangEditor">
              <WangEditor
                v-model="query.quest_remark"
                :ref-name="'quest_remark'"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-form-item label=" ">
            <el-button size="big" type="primary" @click="confirmQuestion">提交</el-button>
            <el-button size="big">取消</el-button>
          </el-form-item>
        </el-row>
      </el-form>
    </div>

  </div>
</template>

<script>
import { getSubjectList, addQuestion, getQuestionDetailApi, editQuestion } from '@/api/exam/question'

export default {
  name: 'QuestionList',
  data() {
    return {
      query: { // 查询信息
        subject_id: '',
        directory_id: '',
        tag_id: '',
        difficulty: '',
        quest_type: '',
        is_true_question: '',
        question: '',
        quest_options: [],
        quest_answer: '',
        quest_remark: ''
      },
      checkNum: '',
      treeList: [], // 学科;目录;标签
      detailData: [],
      tableData: [ // 多选
        { code: 'A', content: '', is_true: false, pic: '' },
        { code: 'B', content: '', is_true: false, pic: '' },
        { code: 'C', content: '', is_true: false, pic: '' },
        { code: 'D', content: '', is_true: false, pic: '' }
      ],
      tableDataOne: [ // 单选
        { code: 'A', content: '', is_true: false, pic: '' },
        { code: 'B', content: '', is_true: false, pic: '' },
        { code: 'C', content: '', is_true: false, pic: '' },
        { code: 'D', content: '', is_true: false, pic: '' }
      ]
      // rules: {
      //   directory_id: [{ required: true, message: '请选择目录' }],
      //   subject_id: [{ required: true, message: '请选择学科' }],
      //   // quest_type: [{ required: true, message: '请选择试题类型' }],
      //   // tag_id: [{ required: true, message: '请选择标签信息' }],
      //   question: [{ required: true, message: '请输入题干内容' }],
      //   difficulty: [{ required: true, message: '必须' }],
      //   is_true_question: [{ required: true, message: '必须' }]
      // }
    }
  },
  computed: {
    // 目录信息
    directoryList() {
      let list = []
      this.treeList.forEach(item => {
        if (item.id === this.query.subject_id) {
          if (item.children.length) {
            list = item.children
          } else {
            list = []
          }
        }
      })
      return list
    },
    // 标签信息
    tagList() {
      let list = []
      this.directoryList.forEach(item => {
        if (item.id === this.query.directory_id) {
          if (item.children.length) {
            list = item.children
          } else {
            list = []
          }
        }
      })
      return list
    }
  },
  watch: {
    // 监听判断
    checkNum(newVal) {
      if (newVal === '1') {
        this.query.quest_answer = '正确'
        this.query.quest_options = [
          { code: '正确', content: '', is_true: true },
          { code: '错误', content: '', is_true: false }
        ]
      } else {
        this.query.quest_answer = '错误'
        this.query.quest_options = [
          { code: '正确', content: '', is_true: false },
          { code: '错误', content: '', is_true: true }
        ]
      }
    },
    // 监听多选框变化
    tableData: {
      deep: true,
      handler(newVal) {
        this.query.quest_options = newVal
        newVal.forEach(item => {
          if (item.is_true === true) {
            this.query.quest_answer = this.query.quest_answer + ',' + item.code
          }
        })
      }
    },
    // 监听单选框数据变化
    tableDataOne: {
      deep: true,
      handler(newVal) {
        this.query.quest_options = newVal
        newVal.forEach(item => {
          if (item.is_true === true) {
            this.query.quest_answer = item.code
          }
        })
      }
    },
    // 监听回显数据
    detailData: {
      deep: true,
      handler(newVal) {
        if (newVal !== null) {
          this.query.subject_id = newVal.subject_id
          this.query = newVal
          this.query.tag_id = ''
          // 处理多选回显
          this.query.quest_options = JSON.parse(this.query.quest_options)
          this.tableData = this.query.quest_options
          this.tableDataOne = this.query.quest_options
          this.query.quest_options.forEach(item => {
            if (item.code === '正确' && item.is_true === true) {
              this.checkNum = '1'
            } else {
              this.checkNum = '2'
            }
          })
        }
      }
    }
  },
  created() {
    !this.treeList.length && this.loadTreeList()
  },
  methods: {
    async getQuestionDetail(id) {
      const res = await getQuestionDetailApi(id)
      this.detailData = res
    },
    /**
     * 确认提交
     */
    async confirmQuestion() {
      if (this.query.id) {
        const res = await editQuestion(this.query)
        this.$message.success('修改成功')
        console.log('res编辑:', res)
      } else {
        // 添加
        const res = await addQuestion(this.query)
        this.$message.success('添加成功')
        console.log('res添加:', res)
      }
      this.$emit('updata:flag', true)
    },
    /**
     * 获取树形数据
     */
    async loadTreeList() {
      const res = await getSubjectList()
      console.log('res:', res)
      this.treeList = res
      console.log(res)
    }
  }
}

</script>
<style scoped>
.question-filter {
  background-color: #fff;
  border-top: 1px solid #eee;
  padding: 30px 16px 0;
}
.el-date-editor.el-input__inner {
  width: 260px;
}
.question-list .el-form-item {
  margin-bottom: 10px;
}

.wangEditor{
  z-index: 0;
}

.box-card {
  width: 948px;
  border: 1px solid #ccc;
}
</style>

